<template>
    <el-form label-width="100px">
      <el-form-item label="SPU 名称"> SPU 名称 </el-form-item>
      <el-form-item label="SKU 名称">
        <el-input placeholder="SKU 名称"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input type="number"></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input type="number"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input type="textarea" placeholder="规格描述" rows="4"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form label-width="100px" :inline="true">
          <el-form-item label="手机系统">
            <el-select placeholder="请选择">
              <el-option value=""></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机系统">
            <el-select placeholder="请选择">
              <el-option value=""></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form label-width="100px" :inline="true">
          <el-form-item label="颜色">
            <el-select placeholder="请选择">
              <el-option value=""></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
  
      <el-form-item label="图片列表">
        <el-table border stripe>
          <el-table-column type="selection" width="55" />
          <el-table-column label="图片"></el-table-column>
          <el-table-column label="名称"></el-table-column>
          <el-table-column label="操作">
            <template v-slot>
              <el-button type="primary">设为默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">保存</el-button>
        <el-button type="default" @click="emit('setState', 0)">取消</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  
  export default defineComponent({
    name: "SkuForm",
  });
  </script>
  
  <script setup lang="ts">
  import type { SpuInfoType } from "@/api/spu";
  import { storeToRefs } from "pinia";
  import useAttrStore from "@/stores/attr";
  
  //1.接受props传值
  const props = defineProps<{
    spuInfo: SpuInfoType;
  }>();
  const spuInfo = props.spuInfo;
  
  //2.接受自定义事件,用来切换组件
  const emit = defineEmits<{
    (event: "setState", state: number, row?: SpuInfoType): void;
  }>();
  
  //3.拿到pinia中的三级分类数据
  const attrStore = useAttrStore();
  const { category1Id, category2Id, category3Id } = storeToRefs(attrStore);
  
  /* //获取所有的平台属性
  requestAttrList(1id,2id,3id)==>attrListType
  //获取所有销售属性
  requestBaseSaleAttrList()===>BaseSaleAttrListType
  //根据当前的spuId获取所有图片列表
  requestSpuImgList(spuId)===>SpuImgListType */
  
  const getInitData = async () => {
    const promise1 = requestAttrList(
      category1Id.value,
      category2Id.value,
      category3Id.value
    );
    const promise2 = requestBaseSaleAttrList();
    const promise3 = requestSpuImgList(spuInfo.id);
  
    const result = await Promise.all([promise1, promise2, promise3]);
  };
  </script>
  